​
<template>
    <div id="mapChange" :style="`height: ${viewHeight}px`"></div>
</template>

<script>
import $ from 'jquery'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
export default defineComponent({
    name: 'Template',
    props: {
        currentRow: {
            type: Object,
            required: true,
        },
        changeMapName: {
            type: Object,
            required: true,
        },
        geoserverURL: {
            type: String,
            required: true,
        }
    },
    emits: ['emitsHandler'],
    components: {},
    setup(props, context) {
        const data = reactive({
            map: null,
            geojson: {},
            viewHeight: window.innerHeight - 60,
            position: {}
        })
        const getGeojson = function () {
            let p = new Promise((resolve, reject) => {
                const url = props.geoserverURL + '/geoserver/result/ows'
                console.log(props.changeMapName)
                const params = {
                    service: 'WFS',
                    version: '1.1.0',
                    request: 'GetFeature',
                    typeName: props.changeMapName.json,
                    outputFormat: 'application/json',
                    srsName: 'EPSG:4326'
                }
                const url_str = url + L.Util.getParamString(params, url)
                $.ajax({
                    // type:'POST',
                    url: url_str,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        addPolyFile(data)
                    },
                })
            })
        };
        const initMap = function () {
            document.getElementById('mapChange').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
            if (props.currentRow.posjson !== '' && props.currentRow.posjson !== null) {
                data.position = JSON.parse(props.currentRow.posjson)
            } else {
                data.position = {
                    center: props.changeMapName.after == 'result:1_3' ? [32.581949, 117.274889] : [32.967047, 94.240372],
                    zoom: props.changeMapName.after == 'result:1_3' ? 15 : 14,
                }
            }
            data.map = L.map("map", {
                center: data.position.center,
                zoom: data.position.zoom,
                zoomControl: true
            }, 100);
            L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
                maxZoom: 18,
                minZoom: 1
            }).addTo(data.map)
            L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
                maxZoom: 18,
                minZoom: 1
            }).addTo(data.map)
            var backLayer = L.tileLayer('http://192.168.12.16:5536/tiles/qh_rs/{z}/{x}/{y}.png ', {
                maxZoom: 14,
                minZoom: 1,
            }).addTo(data.map)
            var beforeLayer = L.tileLayer(`${props.geoserverURL}/geoserver/gwc/service/tms/1.0.0/result%3A${props.changeMapName.before.split(':')[1]}@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 5,
                reuseTiles: true,
                tms: true
            }).addTo(data.map)
            var afterLayer = L.tileLayer(`${props.geoserverURL}/geoserver/gwc/service/tms/1.0.0/result%3A${props.changeMapName.after.split(':')[1]}@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 5,
                reuseTiles: true,
                tms: true
            }).addTo(data.map)
            var nanoLayer = L.tileLayer('http://192.168.12.16:5536/tiles/qh_label/{z}/{x}/{y}.png', {
                maxZoom: 14,
                minZoom: 1,
                tms:true
            }).addTo(data.map)
            /* var beforeLayer = L.tileLayer(`http://111.44.248.190:8055/geoserver/gwc/service/tms/1.0.0/result%3A201_10@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 5,
                reuseTiles: true,
                tms: true
            }).addTo(data.map)
            var afterLayer = L.tileLayer(`http://111.44.248.190:8055/geoserver/gwc/service/tms/1.0.0/result%3Asjy_after@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 5,
                reuseTiles: true,
                tms: true
            }).addTo(data.map) */
            L.control.sideBySide(beforeLayer, afterLayer).addTo(data.map);
        };
        const addPolyFile = function (poly) {
            L.geoJSON(poly, {
                style: {
                    weight: 2,
                    opacity: 1,
                    color: '#2f8ffc',
                    fillOpacity: 0.2,
                    fillColor: '#6ba7de'
                },
                onEachFeature: ((feature, layer) => { //对每个小块进行定义
                    if (props.changeMapName.json == 'result:road_change') {
                        layer.setStyle({
                            weight: 3,
                            color: 'rgb(255,0,0)',  //新增
                            fillOpacity: 0.2,
                        });
                    } else {
                        switch (feature.properties.ChangeType) {
                            case 1:
                                layer.setStyle({
                                    weight: 3,
                                    color: 'rgb(255,0,0)',  //新增
                                    fillOpacity: 0.2,
                                });
                                break;
                            case 2:
                                layer.setStyle({
                                    weight: 3,
                                    color: 'rgb(200,0,255)', //扩大
                                    fillOpacity: 0.2,
                                });
                                break;
                            case 3:
                                layer.setStyle({
                                    weight: 3,
                                    color: 'rgb(0,255,0)',  //减少
                                    fillOpacity: 0.2,
                                });
                                break;
                            default:
                                ChangeTypecCN = '---'
                                break;
                        }
                    }
                    layer.on({
                        //点击弹窗
                        click: ((e) => {
                            let properties = e.target.feature.properties
                            let ActiveTypeCN = translateAT(e.target.feature.properties)
                            let ChangeTypecCN = translateCT(e.target.feature.properties)
                            console.log(e.target.feature.properties)
                            var content = `
                                <p><strong>活动类型：</strong> ${ActiveTypeCN}</p>
                                <p><strong>变化类型：</strong> ${ChangeTypecCN}</p>
                                <p><strong>中心经度：</strong> ${Number(properties.CenterLat).toFixed(2)}</p>
                                <p><strong>中心纬度：</strong> ${Number(properties.CenterLon).toFixed(2)}</p>
                                <p><strong>面积(m²)：</strong> ${Number(properties.Area).toFixed(2)} </p>
                                <p><strong>描述信息：</strong> ${properties.Dscribe ? properties.Dscribe : '---'}</p>
                                <p><strong>前时相：</strong> ${props.changeMapName.qianDate
                                    ? props.changeMapName.qianDate : '---'}</p>
                                <p><strong>后时相：</strong> ${props.changeMapName.houDate ? props.changeMapName.houDate : '---'}</p>
                            `
                            e.target.bindPopup(content);
                            e.target.openPopup()
                        }),
                    });
                })
            }).addTo(data.map);
            //中心点位
        }

        const translateAT = function (properties) {
            let ActiveTypeCN = '---'
            switch (props.changeMapName.json == 'result:road_change' ? properties.class : properties.ActiveType) {
                case 1:
                    ActiveTypeCN = '矿产资源开发'
                    break;
                case 2:
                    ActiveTypeCN = '工业开发'
                    break;
                case 3:
                    ActiveTypeCN = '能源开发'
                    break;
                case 4:
                    ActiveTypeCN = '旅游开发'
                    break;
                case 5:
                    ActiveTypeCN = '交通开发'
                    break;
                case 6:
                    ActiveTypeCN = '养殖开发'
                    break;
                case 7:
                    ActiveTypeCN = '农业开发'
                    break;
                case 8:
                    ActiveTypeCN = '居民点与其他活动'
                    break;
                default:
                    ActiveTypeCN = '---'
                    break;
            }
            return ActiveTypeCN
        }
        const translateCT = function (properties) {
            let ChangeTypecCN = '---'
            switch (properties.ChangeType) {
                case 1:
                    ChangeTypecCN = '新增'
                    break;
                case 2:
                    ChangeTypecCN = '扩大'
                    break;
                case 3:
                    ChangeTypecCN = '减少'
                    break;
                default:
                    ChangeTypecCN = '---'
                    break;
            }
            return ChangeTypecCN
        }
        const createMap = function () {
            getGeojson()
            initMap()
        }
        onMounted(() => {
            // getGeojson()
        })
        return {
            ...toRefs(data),
            getGeojson,
            initMap, createMap
        }
    },
})
</script>

<style lang="scss" scoped></style>
<style lang="scss">
#map {
    width: 100%;
    height: 100%
}

.leaflet-sbs-range {
    left: 0;
    top: 10
}
</style>